<template>
  <view 
    class="base-button" 
    :class="[
      `type-${type}`, 
      `size-${size}`,
      { 'is-disabled': disabled },
      { 'is-loading': loading },
      { 'is-round': round }
    ]"
    :hover-class="disabled ? '' : 'button-hover'"
    @tap="onClick"
  >
    <view class="button-content">
      <text v-if="loading" class="loading-icon">&#xe603;</text>
      <text class="button-text">{{ text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'BaseButton',
  props: {
    // 按钮文字
    text: {
      type: String,
      default: '按钮'
    },
    // 按钮类型：primary, secondary, info, warning, danger
    type: {
      type: String,
      default: 'primary'
    },
    // 按钮大小：large, medium, small, mini
    size: {
      type: String,
      default: 'medium'
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否加载中
    loading: {
      type: Boolean,
      default: false
    },
    // 是否圆角
    round: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onClick() {
      if (!this.disabled && !this.loading) {
        this.$emit('click')
      }
    }
  }
}
</script>

<style>
.base-button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

/* 类型样式 */
.base-button.type-primary {
  background-color: #4080FF;
  color: #fff;
}

.base-button.type-secondary {
  background-color: #FFA500;
  color: #fff;
}

.base-button.type-info {
  background-color: #8C8C8C;
  color: #fff;
}

.base-button.type-warning {
  background-color: #FF9800;
  color: #fff;
}

.base-button.type-danger {
  background-color: #FF5252;
  color: #fff;
}

/* 尺寸样式 */
.base-button.size-large {
  padding: 0 30rpx;
  height: 90rpx;
  font-size: 36rpx;
}

.base-button.size-medium {
  padding: 0 26rpx;
  height: 76rpx;
  font-size: 32rpx;
}

.base-button.size-small {
  padding: 0 22rpx;
  height: 64rpx;
  font-size: 28rpx;
}

.base-button.size-mini {
  padding: 0 18rpx;
  height: 54rpx;
  font-size: 24rpx;
}

/* 禁用状态 */
.base-button.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 圆角按钮 */
.base-button.is-round {
  border-radius: 100rpx;
}

/* 加载状态 */
.base-button.is-loading .loading-icon {
  display: inline-block;
  animation: rotating 2s linear infinite;
  margin-right: 10rpx;
}

/* 按钮内容布局 */
.button-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-hover {
  opacity: 0.8;
  transform: translateY(2rpx);
}

/* 旋转动画 */
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 鸿蒙系统适配 */
/* #ifdef APP-PLUS */
.harmonyos .base-button.type-primary {
  background-color: var(--harmony-primary, #007DFF);
}
/* #endif */

/* 小程序适配 */
/* #ifdef MP-WEIXIN */
.base-button {
  box-sizing: border-box;
}
/* #endif */
</style> 